<template>
    <a-popover
            v-model="visible"
            trigger="click"
            placement="bottomRight"
            overlayClassName="header-notice-wrapper"
            :getPopupContainer="() => $refs.noticeRef.parentElement"
            :autoAdjustOverflow="true"
            :arrowPointAtCenter="true"
            :overlayStyle="{ width: '300px', top: '50px' }"
    >
        <template slot="content">
            <a-spin :spinning="loading">
                <a-tabs>
                    <a-tab-pane tab="通知" key="1">
                        <a-list>
                            <a-list-item>
                                <a-list-item-meta title="你收到了一条通知" description="一年前">
                                    <a-avatar style="background-color: white" slot="avatar"
                                              src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
                                </a-list-item-meta>
                            </a-list-item>
                        </a-list>
                    </a-tab-pane>
                    <a-tab-pane tab="消息" key="2">
                        <a-list>
                            <a-list-item>
                                <a-list-item-meta title="你收到了一条消息" description="3个月之前">
                                    <a-avatar style="background-color: white" slot="avatar"
                                              src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
                                </a-list-item-meta>
                            </a-list-item>
                        </a-list>
                    </a-tab-pane>
                    <a-tab-pane tab="待办" key="3">
                        <a-list>
                            <a-list-item>
                                <a-list-item-meta title="你有一条待办" description="昨天">
                                    <a-avatar style="background-color: white" slot="avatar"
                                              src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
                                </a-list-item-meta>
                            </a-list-item>
                        </a-list>
                    </a-tab-pane>
                </a-tabs>
            </a-spin>
        </template>
        <span @click="fetchNotice" class="header-notice" ref="noticeRef" style="padding: 0 18px">
      <a-badge count="12">
        <a-icon style="font-size: 16px; padding: 4px" type="bell"/>
      </a-badge>
    </span>
    </a-popover>
</template>

<script>
    export default {
        name: 'HeaderNotice',
        data() {
            return {
                loading: false,
                visible: false
            }
        },
        methods: {
            fetchNotice() {
                if (!this.visible) {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false
                    }, 1000)
                } else {
                    this.loading = false
                }
                this.visible = !this.visible
            }
        }
    }
</script>

<style lang="css">
    .header-notice-wrapper {
        top: 50px !important;
    }
</style>
<style lang="less" scoped>
    .header-notice {
        display: inline-block;
        transition: all 0.3s;

        span {
            vertical-align: initial;
        }
    }
</style>
